  <style lang="less">
</style>
<template>
  <div>
    <div id="examinations" v-show="isEditing==1" >
      <Form :model="seachForm" inline :label-width="80" >
        <FormItem prop="name" :label="$t('name')">
          <Input v-model="seachForm.name" placeholder="请输入课程名"></Input>
        </FormItem>
        <FormItem>
          <Button icon="ios-search" @click="seacherSubmit('seacherForm')">查询</Button>
        </FormItem>
      </Form>
      <ButtonGroup >
        <Button icon="ios-add" @click="btnAddClick">新增</Button>
        <Button icon="ios-create" @click="btnEditClick" :disabled="!CurrentRow">修改</Button>
        <Button icon="ios-trash" @click="btnDelClick" :disabled="!CurrentRow">删除</Button>
      </ButtonGroup>
       <Table  border highlight-row ref="currentRowTable" @on-current-change="tableCurrentChange"
              :columns="Columns" :data="Datas"></Table>
        <Page :total="pageInfo.totalRows" @on-change="pageNumberChange" />
    </div>
    <div id="examination" v-show="isEditing==2" >
        <Form  :model="DataForm" :label-width="80" :rules="validateRules">
          <FormItem prop="name" :label="$t('考试名')">
            <Input style="width: 150px" v-model="DataForm.name" placeholder="请输入名称" type="text"></Input>
          </FormItem>
          <FormItem prop="date_range" :label="$t('date_range')">
            <DatePicker type="daterange" :value="[DataForm.start_time,DataForm.end_time]" @on-change="handleDateChange"  placement="请选择时间范围" placeholder="请选择时间范围"></DatePicker>
          </FormItem>
          <FormItem prop="date_qaq" :label="$t('考试时长')">
            <TimePicker type="time"  :value="DataForm.last_time" @on-change="handleDateChange2" ></TimePicker>
           </FormItem>
          <FormItem prop="intro" :label="$t('考试简介')">
          <Input v-model="DataForm.intro" clearable style="width: 600px" type="textarea" :autosize="{minRows: 5,maxRows: 10}" placeholder="Enter something..."></Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="btnSaveClick">保存</Button>
            <Button type="error" style="margin-left: 8px" @click="btnCancelClick">取消</Button>
          </FormItem>
        </Form>
    </div>
  </div>
</template>
<script>
import {getExaminationList, getExamination, addExamination, updateExamination, deleteExamination} from '@/api/examinations'
import {getCourseList, getCourse, addCourse, updateCourse, deleteCourse} from '@/api/course'
import {getChapterList,getChapter, addChapter, updateChapter, deleteChapter } from '@/api/chapters'
import { getKnowledgepointList, getKnowledgepoint, addKnowledgepoint, updateKnowledgepoint, deleteKnowledgepoint } from '@/api/knowledgepoints'
  export default {
    name: '',
    data() {
      return {
        //
              categories: [//分类
                {
                  value: '1',
                  label: '北京',

                },
                {
                  value: '2',
                  label: '江苏',

                }],
              statusModelstatusModel: true,
              validateRules: {
               times: [{type: "string", required: true, message: '格式不正确', pattern: /^\d*$/}],
                name: [{type: "string", required: true, message: '必填项'}],
                category: [{ required: true, message: '必填项'}],
                status: [{type: "string", required: true, message: '必填项'}],
                grade: [{type: "string", required: true, message: '必填项'}],
                outline: [{type: "string", required: true, message: '必填项'}],
                preview: [{type: "string", required: true, message: '必填项'}],
                overview: [{type: "string", required: true, message: '必填项'}],
                reference: [{type: "string", required: true, message: '必填项'}],
                aim: [{type: "string", required: true, message: '必填项'}],
              },
              statusList: [//状态栏
                {label: '正常', value: 1},
                {label: '禁用', value: 2},
                {label: '待审核', value: 3},
              ],
              timeRange:'',
        //
        //
               pageInfo: //分页
               {
                pageNumber: 1,
                pageSize: 10,
                totalRows: 0
              },
              isEditing:1,
              isNew:false,
               seachForm://搜索课程
                {
                name: '',
                address: ''
              },
            Columns: //
            [
                {
                  type: 'index',
                  width: 60,
                  align: 'center',
                },
                {
                  title: this.$t('考试名'),
                  key: 'name'
                },
                {
                  title: this.$t('使用试卷'),
                  key: 'paperName'
                },
                 {
                  title: this.$t('考试简介'),
                  key: 'intro',
                  ellipsis: true
                },
                {
                  title: this.$t('status'),
                  key: 'status',
                  align: 'center',
                  render: (create, record) => {
                    const status = record.row.status;
                    console.log(status);
                    const statusMap = {
                      'success': '正常',
                      'over': '结束',
                      'error': '禁用'
                    };
                    let clazz = 'success';
                    if (status === 2) { 
                      clazz = 'over';
                    } else if (status === 3) { 
                      clazz = 'error';
                    }
                    return create('Tag', {
                      props: {
                        type: clazz,
                      },
                      domProps: {
                        innerHTML: statusMap[clazz],
                      },
                    });
                  }
                },
                {
                  title: this.$t('start_time'),
                  key: 'start_time',
                  render(create,record) {
                    const time = record.row['start_time'];
                    return create('span',time.substr(0, 10));
                  }
                },
                {
                  title: this.$t('end_time'),
                  key: 'end_time',
                  render(create,record) {
                    const time = record.row['end_time'];
                    return create('span',time.substr(0, 10));
                  }
                },
                 {
                  title: this.$t('考试时长'),
                  key: 'last_time',
                  ellipsis: true
                },
               
            ],
              DataForm: {status: 1},//                       当前选中
              CurrentRow: null,                 //     当前行
              Datas:[],//课程列表                   列表
            
        //
      }
    },
    mounted()
     {
      this.queryList();
    },
    methods: {
      //搜索按键
          seacherSubmit: function () {
            this.pageInfo.pageNumber = 1;
            this.queryList();
          },
      //
      //加载页面 load
          couLoad: function()
          {
          this.isEditing = 1;
          this.queryExaminationList();//更新课程
          this.CurrentRow= null;
          this.DataForm={id:fslse,name:fuck};
          this.chapterDataForm={};
          this.knowledgepointDataForm={};
          },
          
      //
    
      //列表  querylist
        queryList: function ()
        {  
            var queryParams = 
            {
              name: this.seachForm.name,
              pageNumber: this.pageInfo.pageNumber,
              pageSize: this.pageInfo.pageSize
            };
         getExaminationList(queryParams).then(res => 
            {
              this.Datas = res.data.rows;
              this.pageInfo.totalRows = parseInt(res.data.total);
            });
        },
      //
      //换页  pagenumberchange
        pageNumberChange: function (pagenum) 
        {
          this.pageInfo.pageNumber = pagenum;
          this.queryList();
        },
       
      //
      //换行 tableCurrentChange
        tableCurrentChange: function (currentRow, oldCurrentRow) //换行
        {
          this.CurrentRow = currentRow;
        },
        
      //
      //添加按钮add
       btnAddClick: function () {//添加
            this.DataForm = {status: 1,};
            this.isEditing = 2;
          },
        
      //
      //修改按钮edit
          btnEditClick: function ()
           {
            this.DataForm = this.CurrentRow;
            this.isEditing = 2;
          },
           
      //
      //删除按钮del
       btnDelClick: function () 
       {
            this.$Modal.confirm({
              title: '删除',
              content: '确定要删除选中的信息吗?',
              onOk: () => {
                this.delData();
              }
            });
             this.couLoad();
          },
      //
      //删除事件
        delData: function () 
          {
            deleteExamination(this.CurrentRow.id).then(res => {
              console.log(res);
              if (res.data && res.data.affectedRows > 0) {
                this.$Message.success('删除成功!');
                this.queryList();
              } else {
                this.$Message.error('删除失败!');
              }
            });
          },
      //
      //保存按键saveclick
        btnSaveClick: function () 
        {
              if (this.DataForm.id) {
                updateExamination(this.DataForm.id, this.DataForm).then(res => {
                  if (res.data && res.data.affectedRows > 0) {
                    this.$Message.success('保存成功!');
                    this.queryList();
                    this.isEditing = 1;
                  } else {
                    this.$Message.error(res.error);
                  }
                });
              } else {
                addExamination(this.DataForm).then(res => {
                  if (res.data && res.data.affectedRows > 0) {
                    this.$Message.success('保存成功!');
                    this.queryList();
                    this.isEditing = 1;
                  } else {
                    this.$Message.error(res.error);
                  }
                });
              }
        },
       
      //
      //取消按键cancel
       btnCancelClick: function () {
            this.isEditing = 1;
          },
      //
      //时间控件
          handleDateChange(val) {
            this.DataForm.start_time = val[0];
            this.DataForm.end_time = val[1];
          },
          handleDateChange2(val) {
            this.DataForm.last_time = val;
          },
      //
    },
  }

</script>